<template>
	<view class="footer" id="footer">
		<scroll-view class="footer-box" scroll-y="true" v-bind:style="{height:scrollHeight +40 + 'px' }">
			<view class="operate-container">
				<picker @change="onPickerChange" range-key="name" :value="carInfo.legType" :range="legtypes">
					<button class="button operate">{{text}}</button>
				</picker>
			</view>
			<view class="obstacle-container">
				<view class="checkbox-group" @click="handleObstacle">
					<view class="checkbox" :class="{active:obstacle}" />
					<view class="text">障碍物设置<text v-if="obstacle">:</text></view>
				</view>
				<template v-if="obstacle">
					<view class="input-box">
						高度(m)<input type="number" v-model="obstacleParam.height" @blur="handleObstacleBlur" />
					</view>
					<view class="input-box">
						距离(m)<input type="number" v-model="obstacleParam.distance" @blur="handleObstacleBlur" />
					</view>
				</template>
			</view>
			<view class="input-container">
				<template v-for="(item,key) in typesData">
					<numberInput v-if="item.visable" :initialVal="item.value" :value="item.value" :step="1"
						:label="item.name" :onChange="inputChange" :index="key" :key="key" :min="item.limitMin"
						:max="item.limitMax" :maxToast="maxToast" :minToast="minToast" />
				</template>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import numberInput from './numberInput.vue'
	const defaultText = '吊臂类型';
	export default {
		components: {
			numberInput
		},
		props: {
			add: {
				type: Function
			},
			legtypes: {
				type: Array
			},
			types: {
				type: Array
			},
			carInfo: {
				type: Object
			}
		},
		name: 'footerBox',
		data() {
			return {
				text: defaultText,
				typesData: {
					shaftlength: {
						name: '铰轴距离',
						args: [],
						index: 0,
						placeholder: '',
						value: 2,
						limitMax: 6,
						limitMin: 1,
						visable: true
					},
					shaftheight: {
						name: '铰轴高度',
						args: [],
						index: 0,
						placeholder: '2.0米',
						value: 4,
						limitMax: 10,
						limitMin: 1,
						visable: true
					},
					armlength: {
						name: '主臂长度',
						args: [],
						index: 0,
						placeholder: '',
						value: 10,
						limitMax: 150,
						limitMin: 10,
						visable: true
					},
					armangle: {
						name: '主臂角度',
						args: [],
						index: 0,
						placeholder: '0',
						value: 60,
						limitMax: 90,
						limitMin: 0,
						visable: true
					},
					jiblength: {
						name: '副臂长度',
						args: [],
						index: 0,
						placeholder: '',
						value: 8,
						limitMax: 200,
						limitMin: 1,
						visable: false
					},
					jibangle: {
						name: '副臂角度',
						args: [],
						index: 0,
						placeholder: '0',
						value: 0,
						limitMax: 90,
						limitMin: 0,
						visable: false
					},
					tklength: {
						name: '塔况长度',
						args: [],
						index: 0,
						placeholder: '2.0米',
						value: 6,
						limitMax: 100,
						limitMin: 1,
						visable: false
					},
					tkangle: {
						name: '塔况角度',
						args: [],
						index: 0,
						placeholder: '0',
						value: 0,
						limitMax: 180,
						limitMin: 0,
						visable: false
					}
				},
				obstacle: false,
				obstacleParam: {
					distance: 20,
					height: 5
				},
				scrollHeight: 0,
				currentIndex: 0
			}
		},
		async onReady() {
			setTimeout(() => {
				this.handleTypes(0);
				this.$nextTick(() => {
					this.init();
				})
			}, 2000)
		},
		mounted: function() {
			
		},
		computed: {},
		watch: {
			types(val) {
				this.$nextTick(() => {
					this.typesData = this.$parent.types;
				})
			},
			carInfo(data){
				this.typesData.armlength.value = data.primaryLength ? Number(data.primaryLength) : 2;
				if(data.obstacleDistance&&Number(data.obstacleDistance)){
					this.obstacle = true;
					this.obstacleParam = {
						distance: Number(data.obstacleDistance),
						height: Number(data.obstacleHeight),
					}
				}	
			}
			// console.log('carInfo----', this.carInfo);
			
			// brandName: "三一"
			// cbrands: null
			// id: 78
			// inputWeight: "15"
			// legType: 1
			// maxweight: null
			// minorLength: "0.00"
			// name: "STC400T"
			// primaryLength: "17.60"
			// radius: "10.00"
			// way: "2000"
			// weight: "8.60"
			// obstacleDistance
			// obstacleHeight
		},
		methods: {
			init: function() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#footer').boundingClientRect();
				query.exec(data => {
					// scrollHeight
					this.scrollHeight = data[0].height - (uni.getSystemInfoSync().platform === 'ios' ? 40 : 0);
					console.log('this.scrollHeight-', this.scrollHeight);
				});
			},
			onPickerChange: function(e) {
				
				const index = e.target.value;
				console.log('index----',index);
				this.handleTypes(index);
				this.currentIndex = index;
			},
			handleTypes: function(index) {
				const id = this.legtypes[index].id;
				this.$parent.setParam(id);
				this.text = this.legtypes[index].name;
				this.typesData = this.$parent.types;
			},
			inputChange: function(inputvalue, target) {
				this.$parent.$parent.drawDC('short', target, inputvalue)
				this.$parent.$parent.calc()
			},
			maxToast: function() {
				uni.showToast({
					title: '已经是该车型的最大值',
					icon: 'none'
				})
			},
			minToast: function() {
				uni.showToast({
					title: '已经是该车型的最小值',
					icon: 'none'
				})
			},
			handleObstacle: function() {
				this.obstacle = !this.obstacle;
				this.$parent.setData({
					obstacleSetting: this.obstacle,
					'obstacle.visable': this.obstacle
				})
				this.$parent.calc();
			},
			handleObstacleBlur: function() {
				this.$parent.setData({
					'obstacleParam.height': this.obstacleParam.height,
					'obstacle.vy': this.obstacleParam.height,
					'obstacleParam.distance': this.obstacleParam.distance,
					'obstacle.vx': this.obstacleParam.distance
				});
				this.$parent.calc();
			},
		}
	}
</script>


<style lang="scss" scoped>
	.button {
		height: 62upx;
		padding: 0;
		margin-bottom: 20upx;
		background-color: #33ADFF;
		border-radius: 8upx;
		line-height: 62upx;
		font-weight: 400;
		font-size: 24upx;
		color: #FFF;


		&.select {
			position: relative;
			padding-left: 20upx;

			&::before {
				position: absolute;
				left: 24upx;
				top: 50%;
				transform: translateY(-30%);
				content: '﹀';
			}
		}
	}

	.footer {
		height: 100%;
	}

	.footer-box {
		padding-bottom: 30upx;
		.input-container {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding-bottom: 75upx;
			
		}

		.operate-container {
			display: flex;
			justify-content: center;
			margin-top: 20upx;

			.operate {
				flex: 0 0 340upx;
				width: 340upx;
			}

			.number-box {
				flex: 0 0 340upx;
				width: 340upx;
				height: 104upx;
				padding: 24upx 20upx;
				background: #FAFAFA;
				border-radius: 18upx;
				display: flex;
				align-items: center;

				.text {
					flex: 1 1 auto;
					font-size: 24upx;
					color: #212121;
					letter-spacing: 0;
					text-align: left;
					font-weight: 400;
				}

				.btn-box {
					display: flex;
					flex: 0 0 230upx;
					width: 230upx;

					.text {
						line-height: 56upx;
						text-align: center;
						font-size: 28upx;
						color: #212121;
					}

					.btn {
						flex: 0 0 56upx;
						width: 56upx;
						height: 56upx;

						&.plus {
							background: url(images/plus.png) 0 0 /100% 100% no-repeat, rgba(255, 255, 255, 0);
						}

						&.minus {
							background: url(images/minus.png) 0 0 /100% 100% no-repeat, rgba(255, 255, 255, 0);
						}
					}
				}
			}
		}

		.obstacle-container {
			display: flex;
			justify-items: center;
			height: 60upx;
			margin-bottom: 37upx;

			.checkbox-group {
				display: flex;
				align-items: center;
				height: 100%;
				margin-right: 16upx;

				.checkbox {
					width: 32upx;
					height: 32upx;
					margin-right: 16upx;
					border-radius: 4upx;
					border: 1upx solid #33ADFF;

					&.active {
						background: url(images/checked.png) 0 0/100% 100% no-repeat;
						border: none;
					}
				}

				.text {
					height: 32upx;
					line-height: 32upx;
					font-size: 28upx;
					color: #212121;
				}
			}

			.input-box {
				display: flex;
				align-items: center;
				height: 100%;
				line-height: 32upx;
				font-size: 28upx;
				color: #212121;

				input {
					height: 50upx;
					width: 107upx;
					font-size: 24upx;
					margin-left: 15upx;
					border-radius: 8upx;
					border: 1px solid #212121;
					text-align: center;
				}

				&+.input-box {
					margin-left: 36upx;
				}
			}
		}

	}
</style>
